<template>
  <div class="header-container">
    <div class="l-content">
      <el-image style="height: 50px; margin: 0 20px" :src="src"></el-image>
      <el-menu
        router
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="/">找家政</el-menu-item>
        <el-menu-item index="/Home">个人中心</el-menu-item>
      </el-menu>
    </div>
    <el-button type="text" style="margin-left: 850px" @click="wallet()"
      >余 额: {{ this.money }}元</el-button
    >
    <el-button type="text" @click="showrecharge = true">充值</el-button>
    <el-dialog title="充值" :visible.sync="showrecharge" width="40%">
      <span
        ><el-card class="filter-container" shadow="never">
          <el-form
            :inline="true"
            :model="charge"
            size="small"
            label-width="140px"
          >
            <el-form-item label="充值金额:">
              <el-input
                style="width: 203px"
                v-model="charge.money"
                placeholder="请输入要充值的金额"
                clearable
              ></el-input>
            </el-form-item>
          </el-form> </el-card
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showrecharge = false">取 消</el-button>
        <el-button type="primary" @click="recharge()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="充值二维码" :visible.sync="showimg" width="20%">
      <span
        ><el-card class="filter-container" shadow="never">
          <el-image
            style="width: 200px; height: 200px"
            :src="rechargeimg"
          ></el-image> </el-card
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showimg = false">返 回</el-button>
      </span>
    </el-dialog>
    <div class="r-content">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="myInfo">个人中心</el-dropdown-item>
          <el-dropdown-item command="loginOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import logo from "../assets/fzu.jpg";
import info from "../assets/info.png";
import Cookie from "js-cookie";
export default {
  data() {
    return {
      url: info,
      src: logo,
      activeIndex: "/Home",
      money: "0",
      showrecharge: false,
      charge: {},
      showimg: false,
      rechargeimg: "",
    };
  },
  created() {
    this.getMoney();
  },
  methods: {
    loginOut() {
      Cookie.remove("token");
      Cookie.remove("menu");
      Cookie.remove("information");
    },
    handleCommand(command) {
      if (command == "loginOut") {
        Cookie.remove("token");
        Cookie.remove("menu");
        this.axios
          .get("api/user/logout")
          .then((response) => {
            this.$message.success("退出登录");
          })
          .catch((error) => {});
        this.$router.replace("/");
      } else {
        this.$router.push("/Home");
      }
    },
    getMoney() {
      var that = this
      this.axios
        .get("api/user/auth/wallet/getWalletInfo")
        .then((response) => {
          this.money = response.data.value.surplus;
        })
        .catch((error) => {});
      setInterval(function () {
        that.axios
          .get("api/user/auth/wallet/getWalletInfo")
          .then((response) => {
            that.money = response.data.value.surplus;
          })
          .catch((error) => {});
      }, 10000);
    },
    wallet() {
      this.$router.push("/wallet");
    },
    recharge() {
      var that = this;
      if (this.charge.money != "") {
        this.axios
          .get("api/user/auth/wallet/recharge?money=" + this.charge.money)
          .then((response) => {
            if (response.data.code == "200") {
              this.showrecharge = false;
              this.showimg = true;
              this.rechargeimg = "data:image/png;base64," + response.data.value;
              var isRecharge = setInterval(function () {
                that.axios
                  .get(
                    "api/user/auth/wallet/isRecharge?money=" + that.charge.money
                  )
                  .then((response) => {
                    console.log(response);
                    if (response.data.value == true) {
                      that.$message.success("充值成功");
                      that.showimg = false;
                      that.getMoney();
                      clearInterval(isRecharge);
                    }
                  })
                  .catch((error) => {});
              }, 1000);
              this.getMoney();
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch((error) => {
            this.$message.error(error);
          });
      } else {
        this.$message.error("请填写充值金额");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.header-container {
  font-family: "微软雅黑";
  padding: 0 20px;
  background-color: #ffffff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    color: #ffff;
    font-size: 14px;
    margin-left: 10px;
  }
  .r-content {
    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .l-content {
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item {
      .el-breadcrumb__inner {
        //font-weight: bold;
        &.is-link {
          color: #303133;
        }
      }
      &:last-child {
        .el-breadcrumb__inner {
          color: #97a8be;
        }
      }
    }
  }
}
</style>